<template>
  <div>

    <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleOpen" :collapse="true"
      background-color="#3975C6" text-color="#AFC8E8" active-text-color="#FFFFFF">

      <el-image class="image_logo" style="width: 30px; height: 30px" :src="require('../assets/logo.png')"
        fit="fill"></el-image>

      <el-menu-item index="1">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">菜单</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-s-cooperation"></i>
        <span slot="title">工具</span>
      </el-menu-item>
      <el-menu-item index="4" class="menu_tool_name">
        <i class="el-icon-s-tools"></i>
        <span slot="title">设置</span>
      </el-menu-item>
    </el-menu>

    <div class="BinToHexContainer" v-if="activeName === 'BTH'">
      <i class="el-icon-s-help"> </i>
      <span> Bin To Hex</span>
      <el-divider content-position="left">Bin File(s)</el-divider>

      <component_loadfile v-for="(item, index) in items" :key="index" :data="item" :index="index" @update:data="updateItem($event)"></component_loadfile>

      <el-divider content-position="left">Output</el-divider>

      <div class="output-path-class">

        <el-input clearable placeholder="生成文件夹选择" v-model="folderPath">
          <el-button slot="append" icon="el-icon-folder-opened" @click="selectFolder"></el-button>
        </el-input>

        <el-input clearable class="input-class" placeholder="请输入生成名字" prefix-icon="el-icon-edit" v-model="input">
        </el-input>

        <el-button type="primary" class="output-path-btn-class">生成</el-button>
      </div>

      <el-divider></el-divider>

    </div>

  </div>
</template>

<script>
import component_loadfile from './BinToHex.vue';

export default {
  name: 'BTH',
  components: {
    component_loadfile,
  },

  data() {
    return {
      textarea: "",
      input: '',
      activeName: 'BTH',
      folderPath:'',
      items: [
        {selectedFolder: null, checked:"false", btn1:"true", btn2:"false", message:"1"},
        {selectedFolder: null, checked:"false", btn1:"true", btn2:"false", message:"2"},
        {selectedFolder: null, checked:"false", btn1:"true", btn2:"false", message:"3"},
        {selectedFolder: null, checked:"false", btn1:"true", btn2:"false", message:"4"},
        {selectedFolder: null, checked:"false", btn1:"true", btn2:"true", message:"5"},
        // 这里根据需要添加更多初始项
      ],

      isDataSent: false, // 全局 isDataSent 变量
      currentComponentIndex: 0,
    };
  },

  mounted() {
    // 监听来自主进程的消息
    window.ipcRenderer.on('selected-folder', (event, path) => {
      this.folderPath = path;
    });
  },

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
      if (key == 1) {
        this.activeName = 'BTH';
      }
      else {
        this.activeName = '';
      }
    },

    updateItem(data) {
      this.items[data.index].selectedFolder = data.selectedFolder;
      this.items[data.index].checked = data.checked;
      this.items[data.index].btn1 = data.btn1;
      this.items[data.index].btn2 = data.btn2;
      console.log("X:", data.index, data.selectedFolder, data.checked, data.btn1, data.btn2)
    },

    selectFolder() {
      // 向主进程发送消息，请求打开文件夹选择对话框
      window.ipcRenderer.send('open-folder-dialog');
    },

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.image_logo {
  padding: 10px;
  margin-top: 15px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-icon-s-home {
  color: rgb(175, 200, 232);
  /* 将图标颜色设置为灰色 */
}

.el-icon-menu {
  color: rgb(175, 200, 232);
  /* 将图标颜色设置为灰色 */
}

.el-icon-s-cooperation {
  color: rgb(175, 200, 232);
  /* 将图标颜色设置为灰色 */
}

.el-icon-s-tools {
  color: rgb(175, 200, 232);
  /* 将图标颜色设置为灰色 */
}

.menu_tool_name {
  margin-top: 150px;
}

.output-path-class {
  width: 630px;
  display: flex;
  justify-content: center;
}

.input-class {
  margin-left: 15px;
  margin-right: 15px;
}

.output-path-btn-class {
  margin-left: 5px;
}

.BinToHexContainer {
  position: absolute;
  top: 50px;
  /* 距离容器顶部50像素 */
  left: 100px;
  /* 距离容器左侧100像素 */
}
</style>
